<template>
  <div class="centermap">

    <div class="maptitle">
      <div class="zuo"></div>
      <span class="titletext">{{ maptitle }}</span>
      <div class="you"></div>
    </div>

    <div class="mapwrap" @wheel.prevent="handleWheel" ref="mapWrapper">

        <img   :src="backgroundImg" alt="Custom Image" class="custom-image" ref="customImage"
              @mousedown="startDrag"
              @mousemove="drag"
              @mouseup="endDrag"
              @mouseleave="endDrag"
              :style="{ transform: `scale(${scale}) translate(${left}px, ${top}px)` }"
            />
	  	  
        <div v-for="marker in markers" :key="marker.id" 
          class="marker point0" @click="markerClick(marker) " :class="{point0:marker.type === 1,point1:marker.type === 2 ,point2:marker.type === 3,point3:marker.type === 4}"
          :style="{position: 'absolute',  top: marker.pageY + 'px', left: marker.pageX + 'px'} ">
        <span>{{ marker.id }}</span>
        </div>
	  
        <!-- 条件渲染详情显示区域 -->
        <div v-for="marker in markers" :key="'info-box-' + marker.id"
              v-if="activeMarker && activeMarker.id === marker.id "
              class="info-box" 
              :style="{ top: (marker.pageY - 140) + 'px', left: (marker.pageX ) + 'px' }">
            <h3>当前孔位的详情信息</h3>
            <p>孔号：{{ marker.holeLocationId}}</p>
            <p>观测层位：{{marker.loc}}</p>
            <p>水位：{{marker.waterLevel}}</p>
            <p>时间：{{marker.time}}</p>
        </div>
		
    </div>

    <div class="table-container" @click="goyujing">
      <table class="scroll-table">
        <thead class="sticky-header">
        <tr>
          <th  style="width: 30%;color: red">预警消息列表</th>
          <th  style="width: 70%;">预警信息</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="alert in alertDate" :key="alert.id">
              <td>{{ alert.alert_message_list }}</td>
              <td>{{ alert.alert_info }}</td>
        </tr>
        </tbody>
      </table>
    </div>

    <div class="xiaohui" style="display: flex; align-items: center; height: 45px;">
      <span class="xiaohui" style="flex: 1; display: flex; justify-content: center;">
        <img src="@/assets/img/img_4.png" style="height:100%; max-width: 100%; object-fit: contain;">
        <img src="@/assets/img/img_3.png" style="height:100%; max-width: 100%; object-fit: contain;">
      </span>
    </div>

  </div>
</template>
<script>
import xzqCode from "../../utils/map/xzqCode";
import { currentGET } from "api/modules";
import * as echarts from "echarts";
import { GETNOBASE } from "api";
import axios from "axios";
export default {

	// backgroundImg:require('../../assets/img/dananhu4.svg'),
  data() {
    return {
		url:'../../assets/img/dananhu4.svg',
	  backgroundImg:require('../../assets/img/dananhu4.svg'),
      alertDate:[],
      dragging: false,
      startX: 0,
      startY: 0,
      left: 0,
      top: 0,
      maptitle: "大南湖七号井",
      scale: 1, // 初始缩放比例
      scaleStep: 0.1, // 每次缩放变化的步长
      markers: [
        { pageY: 274.5, pageX: 309,
          id:"S1",water:"28m", time :"4/22/10:30", loc:"(25,100)",type:1,
          pumpNumber:"第一层", yieldPerUnit:"100L/min", permeabilityCoefficient:"0.8",
          history:[
            {time: "2023/12/19", water: "25m"},
            {time: "2024/1/19", water: "25m"},
            {time: "2024/2/19", water: "38m"},
            {time: "2024/3/19", water: "46m"},
            {time: "2024/4/19", water: "34m"},
            {time: "2024/5/19", water: "28m"},
            // 更多历史记录
          ]
        },
        { pageY: 246.5, pageX: 309,
          id:"ZK4913",water:"21m", time :"4/22/10:30",loc:"(25,100)",type:2,
          pumpNumber:"第二层", yieldPerUnit:"87L/min", permeabilityCoefficient:"0.7",
          history:[
            {time: "2023/12/19", water: "26m"},
            {time: "2024/1/19", water: "30m"},
            {time: "2024/2/19", water: "5m"},
            {time: "2024/3/19", water: "14m"},
            {time: "2024/4/19", water: "23m"},
            {time: "2024/5/19", water: "21m"},
            // 更多历史记录
          ]
        },
        { pageY: 140.8, pageX: 309,
          id:"ZK4916",water:"56m", time :"4/22/10:30",loc:"(25,100)",type:3,
          pumpNumber:"第三层", yieldPerUnit:"23L/min", permeabilityCoefficient:"0.5",
          history:[
            {time: "2023/12/19", water: "51m"},
            {time: "2024/1/19", water: "43m"},
            {time: "2024/2/19", water: "28m"},
            {time: "2024/3/19", water: "36m"},
            {time: "2024/4/19", water: "42m"},
            {time: "2024/5/19", water: "29m"},
            // 更多历史记录
          ]
        },
        { pageY: 383, pageX: 310,
          id:"ZK492",water:"20m", time :"4/22/10:30",loc:"(25,100)",type:4,
          pumpNumber:"第四层", yieldPerUnit:"37L/min", permeabilityCoefficient:"0.2",
          history:[
            {time: "2023/12/19", water: "23m"},
            {time: "2024/1/19", water: "23m"},
            {time: "2024/2/19", water: "13m"},
            {time: "2024/3/19", water: "38m"},
            {time: "2024/4/19", water: "32m"},
            {time: "2024/5/19", water: "20m"},
            // 更多历史记录
          ]
        },
        // { pageY: 278, pageX: 235.5,
        //   id:"ZK4813",water:"23m", time :"4/22/10:30",loc:"(25,100)",
        //   pumpNumber:"第五层", yieldPerUnit:"65L/min", permeabilityCoefficient:"0.2",
        //   history:[
        //     {time: "2023/12/19", water: "20m"},
        //     {time: "2024/1/19", water: "18m"},
        //     {time: "2024/2/19", water: "10m"},
        //     {time: "2024/3/19", water: "14m"},
        //     {time: "2024/4/19", water: "13m"},
        //     {time: "2024/5/19", water: "23m"},
        //     // 更多历史记录
        //   ]
        // },
        // { pageY: 176, pageX:415,
        //   id:"ZKJ410",water:"56m", time :"4/22/10:30",loc:"(25,100)",
        //   pumpNumber:"第三层", yieldPerUnit:"23L/min", permeabilityCoefficient:"0.5",
        //   history:[
        //     {time: "2023/12/19", water: "51m"},
        //     {time: "2024/1/19", water: "43m"},
        //     {time: "2024/2/19", water: "28m"},
        //     {time: "2024/3/19", water: "36m"},
        //     {time: "2024/4/19", water: "42m"},
        //     {time: "2024/5/19", water: "29m"},
        //     // 更多历史记录
        //   ]
        // },
        // { pageY: 252, pageX:418,
        //   id:"补1",water:"56m", time :"4/22/10:30",loc:"(25,100)",
        //   pumpNumber:"第三层", yieldPerUnit:"23L/min", permeabilityCoefficient:"0.5",
        //   history:[
        //     {time: "2023/12/19", water: "51m"},
        //     {time: "2024/1/19", water: "43m"},
        //     {time: "2024/2/19", water: "28m"},
        //     {time: "2024/3/19", water: "36m"},
        //     {time: "2024/4/19", water: "42m"},
        //     {time: "2024/5/19", water: "29m"},
        //     // 更多历史记录
        //   ]
        // },
        // { pageY: 245, pageX:450,
        //   id:"ZK5115",water:"56m", time :"4/22/10:30",loc:"(25,100)",
        //   pumpNumber:"第三层", yieldPerUnit:"23L/min", permeabilityCoefficient:"0.5",
        //   history:[
        //     {time: "2023/12/19", water: "51m"},
        //     {time: "2024/1/19", water: "43m"},
        //     {time: "2024/2/19", water: "28m"},
        //     {time: "2024/3/19", water: "36m"},
        //     {time: "2024/4/19", water: "42m"},
        //     {time: "2024/5/19", water: "29m"},
        //     // 更多历史记录
        //   ]
        // },
        // { pageY: 272, pageX:491,
        //   id:"S2-1",water:"56m", time :"4/22/10:30",loc:"(25,100)",
        //   pumpNumber:"第三层", yieldPerUnit:"23L/min", permeabilityCoefficient:"0.5",
        //   history:[
        //     {time: "2023/12/19", water: "51m"},
        //     {time: "2024/1/19", water: "43m"},
        //     {time: "2024/2/19", water: "28m"},
        //     {time: "2024/3/19", water: "36m"},
        //     {time: "2024/4/19", water: "42m"},
        //     {time: "2024/5/19", water: "29m"},
        //     // 更多历史记录
        //   ]
        // },
        // { pageY: 346.5, pageX:507,
        //   id:"S3",water:"56m", time :"4/22/10:30",loc:"(25,100)",
        //   pumpNumber:"第三层", yieldPerUnit:"23L/min", permeabilityCoefficient:"0.5",
        //   history:[
        //     {time: "2023/12/19", water: "51m"},
        //     {time: "2024/1/19", water: "43m"},
        //     {time: "2024/2/19", water: "10m"},
        //     {time: "2024/3/19", water: "36m"},
        //     {time: "2024/4/19", water: "10m"},
        //     {time: "2024/5/19", water: "29m"},
        //     // 更多历史记录
        //   ]
        // },
        // { pageY: 450, pageX:503,
        //   id:"S4",water:"56m", time :"4/22/10:30",loc:"(25,100)",
        //   pumpNumber:"第三层", yieldPerUnit:"23L/min", permeabilityCoefficient:"0.5",
        //   history:[
        //     {time: "2023/12/19", water: "51m"},
        //     {time: "2024/1/19", water: "43m"},
        //     {time: "2024/2/19", water: "10m"},
        //     {time: "2024/3/19", water: "36m"},
        //     {time: "2024/4/19", water: "10m"},
        //     {time: "2024/5/19", water: "29m"},
        //     // 更多历史记录
        //   ]
        // },
        // { pageY: 445, pageX:556,
        //   id:"补5",water:"56m", time :"4/22/10:30",loc:"(25,100)",
        //   pumpNumber:"第三层", yieldPerUnit:"23L/min", permeabilityCoefficient:"0.5",
        //   history:[
        //     {time: "2023/12/19", water: "51m"},
        //     {time: "2024/1/19", water: "43m"},
        //     {time: "2024/2/19", water: "10m"},
        //     {time: "2024/3/19", water: "36m"},
        //     {time: "2024/4/19", water: "10m"},
        //     {time: "2024/5/19", water: "29m"},
        //     // 更多历史记录
        //   ]
        // },
        // { pageY: 446, pageX:591,
        //   id:"ZK533",water:"56m", time :"4/22/10:30",loc:"(25,100)",
        //   pumpNumber:"第三层", yieldPerUnit:"23L/min", permeabilityCoefficient:"0.5",
        //   history:[
        //     {time: "2023/12/19", water: "51m"},
        //     {time: "2024/1/19", water: "43m"},
        //     {time: "2024/2/19", water: "10m"},
        //     {time: "2024/3/19", water: "36m"},
        //     {time: "2024/4/19", water: "10m"},
        //     {time: "2024/5/19", water: "29m"},
        //     // 更多历史记录
        //   ]
        // },
        // { pageY: 434, pageX:417,
        //   id:"补2",water:"56m", time :"4/22/10:30",loc:"(25,100)",
        //   pumpNumber:"第三层", yieldPerUnit:"23L/min", permeabilityCoefficient:"0.5",
        //   history:[
        //     {time: "2023/12/19", water: "51m"},
        //     {time: "2024/1/19", water: "43m"},
        //     {time: "2024/2/19", water: "10m"},
        //     {time: "2024/3/19", water: "36m"},
        //     {time: "2024/4/19", water: "10m"},
        //     {time: "2024/5/19", water: "29m"},
        //     // 更多历史记录
        //   ]
        // },
        // { pageY: 438, pageX:360.5,
        //   id:"检2",water:"56m", time :"4/22/10:30",loc:"(25,100)",
        //   pumpNumber:"第三层", yieldPerUnit:"23L/min", permeabilityCoefficient:"0.5",
        //   history:[
        //     {time: "2023/12/19", water: "51m"},
        //     {time: "2024/1/19", water: "43m"},
        //     {time: "2024/2/19", water: "10m"},
        //     {time: "2024/3/19", water: "36m"},
        //     {time: "2024/4/19", water: "10m"},
        //     {time: "2024/5/19", water: "29m"},
        //     // 更多历史记录
        //   ]
        // },
        // { pageY: 468, pageX:351,
        //   id:"检1",water:"56m", time :"4/22/10:30",loc:"(25,100)",
        //   pumpNumber:"第三层", yieldPerUnit:"23L/min", permeabilityCoefficient:"0.5",
        //   history:[
        //     {time: "2023/12/19", water: "51m"},
        //     {time: "2024/1/19", water: "43m"},
        //     {time: "2024/2/19", water: "10m"},
        //     {time: "2024/3/19", water: "36m"},
        //     {time: "2024/4/19", water: "10m"},
        //     {time: "2024/5/19", water: "29m"},
        //     // 更多历史记录
        //   ]
        // },
        // { pageY: 482, pageX:347,
        //   id:"ZKJ303",water:"56m", time :"4/22/10:30",loc:"(25,100)",
        //   pumpNumber:"第三层", yieldPerUnit:"23L/min", permeabilityCoefficient:"0.5",
        //   history:[
        //     {time: "2023/12/19", water: "51m"},
        //     {time: "2024/1/19", water: "43m"},
        //     {time: "2024/2/19", water: "10m"},
        //     {time: "2024/3/19", water: "36m"},
        //     {time: "2024/4/19", water: "10m"},
        //     {time: "2024/5/19", water: "29m"},
        //     // 更多历史记录
        //   ]
        // },
        // { pageY: 565, pageX:418.8,
        //   id:"补3",water:"33m", time :"4/22/10:30",loc:"(25,100)",
        //   pumpNumber:"第三层", yieldPerUnit:"23L/min", permeabilityCoefficient:"0.5",
        //   history:[
        //     {time: "2023/12/19", water: "51m"},
        //     {time: "2024/1/19", water: "43m"},
        //     {time: "2024/2/19", water: "10m"},
        //     {time: "2024/3/19", water: "36m"},
        //     {time: "2024/4/19", water: "10m"},
        //     {time: "2024/5/19", water: "29m"},
        //     // 更多历史记录
        //   ]
        // },
        // { pageY: 565, pageX:486,
        //   id:"补4",water:"522m", time :"4/22/10:30",loc:"(250,100)",
        //   pumpNumber:"第三层", yieldPerUnit:"23L/min", permeabilityCoefficient:"0.5",
        //   history:[
        //     {time: "2023/12/19", water: "51m"},
        //     {time: "2024/1/19", water: "43m"},
        //     {time: "2024/2/19", water: "10m"},
        //     {time: "2024/3/19", water: "36m"},
        //     {time: "2024/4/19", water: "10m"},
        //     {time: "2024/5/19", water: "29m"},
        //     // 更多历史记录
        //   ]
        // },
        // 更多交互点
      ],
      originalMarkers: [] ,// 用于存放标记的原始坐标的新数组
      activeMarker: null, // 当前激活的标记的详细信息
    };
  },
  async created() {
	  // 获取背景图片
	  await this.getBackgroundImage();
    await this.getMarkersList();
    // 在组件创建时，初始化originalMarkers数组  用来存放标记的原始坐标。
    await this.initOriginalMarkers();
    // this.getAlertDate();
  },
  mounted() {
    this.getMapWrapDimensions();
  },

  methods: {
    async getBackgroundImage(){
      try{
        const response = await axios.get('http://localhost:8080/rs-images/getLatested')
        console.log('查询背景图片效果response.data = ', response.data.url)
        
        this.backgroundImg=response.data.url
      }catch(error){
        this.$message.success('查询背景图片失败')
      }
    },
	  
    async getMarkersList() {
      try {
        const response = await axios.get('http://localhost:8080/hole-locations/getAll')
        console.log('查询孔位的response.data = ', response.data)
        if (response.code === '0') {
          const markersList = response.data
          const markersPromises = markersList.map(async (marker) => {
            const waterResponse = await axios.get('http://localhost:8080/water-level-histories/gets?holeid=' + marker.holeLocationId)
            const waterHistories = waterResponse.data
            return {
              ...marker,
              history: waterHistories.map((water) => ({
                time: water.time,
                water: water.waterLevel
              }))
            }
          })
          this.markers = await Promise.all(markersPromises)
          console.log("组装好的marker长这样：", this.markers)
        } else {
          // 查询失败
          this.$message.success('查询孔位失败')
        }
      } catch (error) {
        this.$message.success('查询孔位失败')
      }
    },

    async getAlertDate(){
    try {
      const response = await axios.get("http://localhost:8080/alert");
      this.alertDate = response;
      console.log("response的内容为",response)

    }catch (e){
      console.error("Error fetching data:", e);
      this.alertDate = []; // 如果请求失败，清空数据
    }
  },

    goyujing() {
      this.$router.push('/index/yujing-list'); // 使用路由名跳转
    },

    calculateMarkerStyle(marker) {
      return {
        position: 'absolute',
        top: `${marker.pageY * this.scale + this.top}px`,
        left: `${marker.pageX * this.scale + this.left}px`,
      };
    },

    getMapWrapDimensions() {
      const mapWrapElement = this.$refs.mapWrapper;
      if (mapWrapElement) {
        const width = mapWrapElement.offsetWidth; // 获取元素宽度
        const height = mapWrapElement.offsetHeight; // 获取元素高度
        console.log(`Width: ${width}, Height: ${height}`);
      }},

    initOriginalMarkers() {
      console.log("initOriginalMarkers里的Markers:", this.markers)
      // 遍历markers数组，并将每个标记的原始坐标复制到originalMarkers数组中
      this.originalMarkers = this.markers.map(marker => ({
        pageY: marker.pageY,
        pageX: marker.pageX
      }));
      console.log("initOriginalMarkers里的Original Markers:", this.originalMarkers)
    },

    startDrag(event) {
      if(this.scale==1) return;
      this.isDragging = true;
      this.startX = event.clientX;
      this.startY = event.clientY;
      event.preventDefault();
    },

    drag(event) {
      if (!this.isDragging) return;
      const mapWrapElement = document.querySelector('.mapwrap');
      const mapWrapWidth = mapWrapElement.offsetWidth; // 获取实际宽度
      const mapWrapHeight = mapWrapElement.offsetHeight; // 获取实际高度
      const deltaX = event.clientX - this.startX;
      const deltaY = event.clientY - this.startY;
      const maxDeltaX = (this.scale - 1) *  mapWrapWidth / 4;
      const maxDeltaY = (this.scale - 1) *  mapWrapHeight / 4+50;

      if (Math.abs(this.left + deltaX) > maxDeltaX || Math.abs(this.top + deltaY) > maxDeltaY) return;
      this.left += deltaX;
      this.top += deltaY;

      this.markers.forEach(marker => {
        marker.pageY = marker.pageY+deltaY*this.scale;
        marker.pageX = marker.pageX+deltaX*this.scale;//标记移动距离会更大
      });
      this.startX = event.clientX;
      this.startY = event.clientY;
    },

    endDrag() {
      this.isDragging = false;
    },

    handleWheel(event) {
      console.log("=====开始运行handleWheel方法=====")
      console.log("Markers:", this.markers)
      console.log("Original Markers:", this.originalMarkers)
      if (this.scale === 1) {
        console.log("=====初始状态下=====")
        // 初始状态下，重置位置和缩放比例
        this.left = 0;
        this.top = 0;
        this.scale = 1;
        this.markers.forEach((marker,index) => {
          const originalMarker = this.originalMarkers[index];
          marker.pageY = originalMarker.pageY ;
          marker.pageX =originalMarker.pageX ;
          // 容器宽度
        });
      }
      console.log("=====处理=====")
      const mapWrapElement = document.querySelector('.mapwrap');
      console.log("地图容器元素mapWrapElement = ",mapWrapElement)    
      const mapWrapWidth = mapWrapElement.offsetWidth; // 获取实际宽度
      const mapWrapHeight = mapWrapElement.offsetHeight; // 获取实际高度
      if (event.deltaY < 0 && this.scale < 3) {
        // 向上滚动，放大
        this.scale += this.scaleStep;
        this.markers.forEach((marker,index) => {
          const originalMarker = this.originalMarkers[index];
          marker.pageY = marker.pageY+this.scaleStep*(originalMarker.pageY - mapWrapHeight/2)+this.top*this.scaleStep;
          marker.pageX = marker.pageX+this.scaleStep*(originalMarker.pageX - mapWrapWidth/2)+this.left*this.scaleStep;
          // console.log(marker.pageY,"现在",marker.pageX);
        });
      } else if (this.scale>1){
        // 向下滚动，缩小
        this.scale = Math.max(1, this.scale - this.scaleStep);
        // this.left=this.left-this.left/(10*(this.scale -1));
        // this.top=this.top-this.top/(10*(this.scale -1));
        this.markers.forEach((marker,index) => {
          const originalMarker = this.originalMarkers[index];
          marker.pageY = marker.pageY-this.scaleStep*(originalMarker.pageY - mapWrapHeight/2)-this.top*this.scaleStep-this.scale*this.top/(10*(this.scale -1));
          marker.pageX = marker.pageX-this.scaleStep*(originalMarker.pageX - mapWrapWidth/2)-this.left*this.scaleStep-this.scale*this.left/(10*(this.scale -1));
           // 容器宽度
        });// 设置最小缩放限制
        this.left=this.left-this.left/(10*(this.scale -1));
        this.top=this.top-this.top/(10*(this.scale -1));
      }//放大和拖拽是两个动作，但是缩小是两个动作一起进行的。
    },

    markerClick(marker) {
      if (this.activeMarker && this.activeMarker.id === marker.id) {
        this.activeMarker = null; // 如果已经是激活状态，则关闭详情
      } else {
        this.activeMarker = marker; // 激活新的标记
        this.$emit('marker-selected', marker);  // 向父组件发送一个名为 marker-selected 的事件，并附带当前孔位的数据 marker。
      }
    },
	upload(){
		this.backgroundImg='http://localhost:8080/rs-images/download/24'
		// this.getBackgroundImage()
		// this.backgroundImg=require('../../assets/img/dananhu4.svg')
	}
  },
};
</script>
<style lang="scss" scoped>
// .login-cycle{
//   width: 20px;      //小圆点
//   height: 20px;
//   transform: translateX(-70%, -70%);
//   display: inline-block;
//   background-color: rgba(215, 234, 38 ,1);
//   // opacity: 1;
//   border-radius: 50%;
// }
.centermap {
  margin-bottom: 20px;
  .centerbottom{
    height: 180px;
    width: 100%;
  }
  .maptitle {
    margin-top: 0px;
    height: 40px;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    box-sizing: border-box;

    .titletext {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 6px;
      background: linear-gradient(
              92deg,
              #0072ff 0%,
              #00eaff 48.8525390625%,
              #01aaff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 10px;
    }

    .zuo,
    .you {
      background-size: 100% 100%;
      width: 29px;
      height: 20px;
      margin-top: 8px;
    }
	

    .zuo {
      background: url("../../assets/img/xiezuo.png") no-repeat;
    }

    .you {
      background: url("../../assets/img/xieyou.png") no-repeat;
    }
	
	.btn{
		background-color: transparent;
		color: white;
		// width: 50px;
		// height: 22px;
		overflow: auto;
		font-size: 16px;
		// z-index: 10;
		// margin-left: 100px;
	}
  }

  .mapwrap {
    margin-top: 10px;
    overflow: hidden; // 隐藏溢出的部分
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    img.custom-image {
      width: 100%;  // 保证图片宽度匹配容器
      height: 750px;
    }
    .marker {
		width: 30px;
		height: 50px;
      cursor: pointer;
      position: relative;
      // background-color: #007BFF;
      // background-image: url("../../assets/img/qizi.png"); /* 自定义图片路径 */
      // background-size: cover; /* 调整图片尺寸以适应标记点大小 */
      // background-repeat: no-repeat; /* 禁止重复背景图片 */
	  
	  // background-image: url("../../assets/img/水文长观孔.svg");
	  // background-size: 140000% 140000%;
	  // background-position: center; /* 让图像居中显示 */
	  
	  
      // padding: 100px 100px;
      // color: white;
      transform: translate(-50%, -50%);
      // border: 2px solid white; /* 边框样式 */
      // border-radius: 50%; /* 圆形 */
	  z-index: 2;
    }
	
	.point0{
		
		background-image: url("../../assets/img/地质钻孔.svg");
		background-size: 2500px 2500px;
		background-position: 48% 51.15%; /* 让图像居中显示 */
		span{
			color: #939598;
			padding-left: 30px;
		}
	}
	.point1{
		
		background-image: url("../../assets/img/水文长观孔.svg");
		background-size: 2500px 2500px;
		background-position: 51% 52%; /* 让图像居中显示 */
		span{
			color:#00ff00;
			padding-left: 30px;
		}
	}
	.point2{

		background-image: url("../../assets/img/抽水钻孔.svg");
		background-size: 2500px 2500px;
		background-position: 51.5% 50.5%; /* 让图像居中显示 */
		span{
			color:#00ff00;
			padding-left: 30px;
		}
	}
	.point3{
		
		background-image: url("../../assets/img/混合孔.svg");
		background-size: 2500px 2500px;
		background-position: 51% 52%; /* 让图像居中显示 */
		span{
			color:#00ff00;
			padding-left: 30px;

		}
	}
	
	.login-cycle{
	  // width: 10px;
	  // height: 10px;
	  position: relative;
	  background-color: #ffffff;
	  background-image: url("../../assets/img/地质钻孔.svg");
	  background-size: cover; /* 调整图片尺寸以适应标记点大小 */
	  background-repeat: no-repeat; /* 禁止重复背景图片 */
	  padding: 10px 10px;
	  // color: white;
	  transform: translate(-50%, -50%);
	  // border: 2px solid white; /* 边框样式 */
	  border-radius: 50%; /* 圆形 */
	  z-index: 1;
	  
	}

    .custom-image {
      transition: transform 0.1s ease-in-out; // 平滑变换效果
      transform-origin: center; // 确保缩放以图片中心为基点
    }
  }
}
.centermap .info-box {
  position: absolute;
  //top: 30%; // 调整为合适的位置
  //left: 60%; // 调整为合适的位置
  width: 150px; /* 设置显示区域的宽度 */
  height: 100px; /* 设置显示区域的高度 */
  transform: translateX(-50%);
  padding: 10px;
  background-color: #153caa;
  background-color: #153caa;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgb(0, 0, 0);
  box-shadow: 0 2px 4px rgb(0, 0, 0);
  z-index: 100;
  line-height: 20px;
}

.table-container {
  border: 1px solid blue;
  margin-bottom: 50px;
  width: 100%;
  height: 350px; /* 设置容器高度，超出部分会出现滚动条 */
  overflow-y: auto; /* 使用滚动条 */
  overflow-x: hidden;
  position: relative;

}

.scroll-table {
  width: 100%;
  border-collapse: collapse; /* 使表格边框连接 */
}

.scroll-table th,
.scroll-table td {
  border: 2px solid blue; /* 添加表格边框 */
  padding: 8px; /* 添加内边距 */
}
.sticky-header {
  position: sticky;
  top: 0;
  height: 90%;
  background-color: black;
  border-bottom: 1px solid blue; /* 底部边框 */
  box-shadow: 0 0 0 1px blue inset; /* 内部边框，模拟外部边框效果 */
}
.xiaohui{
  margin-top: 7px;
  width: 100%;
  height: 60px;
}
</style>
